<template>
  <div class="project_interview_container">
    <div class="ai_container">
      <AIConsulting size="small" type="chat"></AIConsulting>
    </div>
    <div class="project_container">
      <div class="project_container_projectName">{{ projectData.name }}</div>
      <div class="project_container_message">
				<div
          class="message_Box"
          v-if="
            projectData.newProjectResultFileList &&
            projectData.newProjectResultFileList.length
          "
        >
          <div class="message_label">项目成果展示</div>
          <div class="message_content">
            <a-carousel arrows>
              <template #prevArrow>
                <div
                  class="custom-slick-arrow"
                  style="left: 10px; z-index: 1; font-size: 30px; color: #d2ccdd"
                >
                  <LeftCircleOutlined />
                </div>
              </template>
              <template #nextArrow>
                <div
                  class="custom-slick-arrow"
                  style="right: 20px; font-size: 30px; color: #d2ccdd"
                >
                  <RightCircleOutlined />
                </div>
              </template>
              <div
                class="imagesBox"
                v-for="(item, index) in projectData.newProjectResultFileList"
              >
                <div class="img">
                  <img
                    :src="item[0]?.fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 0)"
                  />
                </div>
                <div class="img">
                  <img
                    :src="item[1]?.fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 1)"
                  />
                </div>
              </div>
            </a-carousel>
          </div>
        </div>

        <div class="message_Box" v-if="projectData.resultLink">
          <div class="message_label">项目成果链接</div>
          <div class="message_content">
            {{ projectData.resultLink || '暂无' }}
          </div>
        </div>
        <div class="message_Box">
          <div class="message_label">项目简介:</div>
          <div class="message_content">
            <div v-html="projectData.describe || '暂无'"></div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">报名状态:</div>
          <div class="message_content statusContent">
            {{ signUpStatusLabel[projectData.registrationStatus] || '暂无' }}
          </div>
        </div>

        <div class="message_Box" v-if="projectData.template != 1">
          <div class="message_label jobLabel">
            <div>
              <span
                >项目岗位:
                <span
                  v-if="projectData.registrationStatus == 1"
                  class="jobLabelTip"
                  >请点击岗位栏选择你要加入的岗位</span
                >
              </span>
            </div>
            <a-button
              type="primary"
              @click="toApply"
              :disabled="isCheckedJob == 'false'"
              v-if="
                projectData.registrationStatus == 1 &&
                projectData.recruitStatus != 1 &&
                !isTeacher()
              "
              >应聘
            </a-button>
          </div>
          <div class="message_content job_content">
            <div
              class="jobBox"
              :class="{
                active:
                  i == activeJobIndex &&
                  item.isFull == 0 &&
                  isCheckedJob == 'true' &&
                  projectData.registrationStatus == 1,
                disabled:
                  item.isFull == 1 && projectData.registrationStatus == 1,
              }"
              v-for="(item, i) in projectData.projectJobCardVOList"
              @click="() => jobClick(item, i)"
            >
              <div class="jobBox_img_and_skills">
                <div class="jobImgBox">
                  <img src="@/assets/user.png" alt="" />
                </div>
                <div class="jobBox_skills">
                  <div>技能描述:</div>
                  <a-tooltip color="rgba(0,0,0,0.6)">
                    <template #title>{{ item.skill }}</template>
                    <div class="jobBox_skills_content">{{ item.skill }}</div>
                  </a-tooltip>
                  <!-- <div>{{item.skills}}</div> -->
                </div>
              </div>
              <div class="jobBox_jobNum">
                <div class="jobName">{{ item.name }}</div>
                <div :class="{ notfilled: item.isFull === 0 }">
                  待招<span>{{ item.vacancyNum }}</span
                  >人
                </div>
                <div>共招{{ item.requiredNum }}人</div>
              </div>
            </div>
          </div>
        </div>

        <div class="message_Box" v-if="projectData.template == 1">
          <div class="message_label jobLabel">
            <div>
              <span
                >项目岗位:
                <!-- <span class='jobLabelTip'>请点击岗位栏选择你要加入的岗位</span> -->
              </span>
            </div>
            <div
              v-if="
                projectData.registrationStatus == 1 &&
                projectData.recruitStatus != 1 &&
                !isTeacher()
              "
            >
              <!-- <div> -->
              <a-button
                type="primary"
                @click="toJoinGroup"
                :disabled="isCheckedJob == 'false'"
                style="margin-right: 15px"
                >加入小组</a-button
              >
              <a-button
                type="primary"
                @click="toCreateGroup"
                :disabled="isCheckedJob == 'false'"
                >创建小组
              </a-button>
            </div>
          </div>
          <div class="message_content job_content">
            <div
              class="jobBox"
              v-for="(item, i) in projectData.projectJobCardVOList"
              @click="() => jobClick(item, i)"
            >
              <div class="jobBox_img_and_skills">
                <div class="jobImgBox">
                  <img src="@/assets/user.png" alt="" />
                </div>
                <div class="jobBox_skills">
                  <div>技能描述:</div>
                  <a-tooltip color="rgba(0,0,0,0.6)">
                    <template #title>{{ item.skill }}</template>
                    <div class="jobBox_skills_content">{{ item.skill }}</div>
                  </a-tooltip>
                  <!-- <div>{{item.skills}}</div> -->
                </div>
              </div>
              <div class="jobBox_jobNum">
                <div class="jobName">{{ item.name }}</div>
                <div>
                  待招<span>{{ item.vacancyNum }}</span
                  >人
                </div>
                <div>共招{{ item.requiredNum }}人</div>
              </div>
            </div>
          </div>
        </div>

        <div class="message_Box" v-if="projectData.mainTeacher">
          <div class="message_label">主指导老师:</div>
          <div class="message_content job_content">
            <a-tooltip>
              <template
                v-if="projectData.mainTeacher.introduceYourself"
                #title
                >{{
                  projectData.mainTeacher
                    ? projectData.mainTeacher.introduceYourself
                    : ''
                }}</template
              >
              <div class="jobBox">
                <div class="jobBox_img_and_skills">
                  <div class="jobImgBox">
                    <img src="@/assets/user.png" alt="" />
                  </div>
                  <div class="jobBox_skills">
                    <div>
                      姓名：{{
                        projectData.mainTeacher
                          ? projectData.mainTeacher.name
                          : '暂无'
                      }}
                    </div>
                    <div class="jobBox_job_content">
                      专业：{{
                        projectData.mainTeacher.orientation
                          ? projectData.mainTeacher.orientation
                          : '暂无'
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </a-tooltip>
          </div>
        </div>

        <div
          class="message_Box"
          v-if="
            projectData.coTeacherList && projectData.coTeacherList.length > 0
          "
        >
          <div class="message_label">副指导老师:</div>
          <div class="message_content job_content">
            <div class="jobBox" v-for="item in projectData.coTeacherList">
              <a-tooltip>
                <template #title v-if="item.introduceYourself">{{
                  item.introduceYourself
                }}</template>
                <div class="jobBox_img_and_skills">
                  <div class="jobImgBox">
                    <img src="@/assets/user.png" alt="" />
                  </div>
                  <div class="jobBox_skills">
                    <div>姓名：{{ item.name }}</div>
                    <div class="jobBox_job_content">
                      专业：{{ item.orientation || '暂无' }}
                    </div>
                  </div>
                </div>
              </a-tooltip>
            </div>
          </div>
        </div>

        <!-- <div class='message_Box' v-if='projectData.teacherProjectVOList'>
						<div class='message_label'>指导老师: </div>
						<div class='message_content'>
							<span v-if="projectData.teacherProjectVOList.length>0"
								v-for="(item,i) in projectData.teacherProjectVOList"
								style='margin-right:0px;display:inline-block'>{{item.teacherName}}{{i==projectData.teacherProjectVOList.length-1?'':'，'}}</span>
							<span v-if='projectData.teacherProjectVOList.length==0'>暂无</span>
						</div>
					</div> -->

        <div class="message_Box">
          <!-- <div class='message_label'>项目基本信息: </div> -->
          <div class="message_basic_information">
            <div class="message_Box">
              <div class="message_label">所属年级:</div>
              <div class="message_content">
                {{ projectData.grade }}
              </div>
            </div>

            <div class="message_Box">
              <div class="message_label">所属班级:</div>
              <div class="message_content">
                <template
                  v-if="
                    projectData.gradeClassList &&
                    projectData.gradeClassList.length > 0
                  "
                >
                  <span v-for="(item, i) in projectData.gradeClassList">
                    {{ item.gradeClassName
                    }}{{
                      i == projectData.gradeClassList.length - 1 ? '' : '、'
                    }}
                  </span>
                </template>
                <template
                  v-if="
                    !(
                      projectData.gradeClassList &&
                      projectData.gradeClassList.length > 0
                    )
                  "
                  >暂无</template
                >
              </div>
            </div>

            <div class="message_Box">
              <div class="message_label">项目难度:</div>
              <div class="message_content">
                <a-rate v-model:value="projectData.difficulty" disabled />
              </div>
            </div>

            <div class="message_Box">
              <div class="message_label">项目类型:</div>
              <div class="message_content">
                {{ projectData.category }}
              </div>
            </div>

            <div class="message_Box">
              <div class="message_label">项目报名类型:</div>
              <div class="message_content">
                {{
                  projectData.template
                    ? { 1: '多组协作', 2: '经典' }[projectData.template]
                    : '暂无'
                }}
              </div>
            </div>

            <div class="message_Box">
              <div class="message_label">项目成员总数:</div>
              <div class="message_content">
                {{
                  projectData.totalMemberLimit
                    ? `${projectData.totalMemberLimit}人`
                    : '暂无'
                }}
              </div>
            </div>

            <div class="message_Box" v-if="projectData.template == 1">
              <div class="message_label">小组人数限制:</div>
              <div class="message_content">
                {{
                  projectData.groupMemberLimit
                    ? `每组最多${projectData.groupMemberLimit}人`
                    : '暂无'
                }}
              </div>
            </div>

            <div class="message_Box">
              <div class="message_label">开发模型:</div>
              <div class="message_content">
                {{ projectData.devModelName || '暂无' }}
              </div>
            </div>
          </div>

          <div class="message_Box">
            <div class="message_label">关联课程:</div>
            <div class="message_content">
              <template
                v-if="
                  projectData.courseList && projectData.courseList.length > 0
                "
              >
                <span v-for="(item, i) in projectData.courseList">
                  {{ item.courseName
                  }}{{ i == projectData.courseList.length - 1 ? '' : '、' }}
                </span>
              </template>
              <template
                v-if="
                  !(projectData.courseList && projectData.courseList.length > 0)
                "
                >暂无</template
              >
            </div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">评分标准:</div>
          <div class="message_content">
            <!-- {{projectData.scoreStandard||'暂无'}} -->
            <div v-html="projectData.scoreStandard || '暂无'"></div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">项目目标:</div>
          <div class="message_content">
            <!-- {{projectData.target?projectData.target:'暂无'}} -->
            <div v-html="projectData.target || '暂无'"></div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">项目周期:</div>
          <div class="message_content">
            {{ formatDate(projectData.startTime) }}至{{
              formatDate(projectData.endTime)
            }}
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->

    <a-modal
      v-model:open="isCreateGroupOpen"
      title="创建小组"
      @ok="createGroup"
      okText="创建"
      @cancel="
        () => {
          groupName = ''
          myJob = undefined
        }
      "
    >
      组名：<a-input
        v-model:value="groupName"
        placeholder="请输入小组名称"
        style="width: 100%; margin-top: 5px"
      />
      <div style="margin: 20px 0">
        请选择你在小组的职位：<a-select
          ref="select"
          style="width: 100%; margin-top: 5px"
          v-model:value="myJob"
          :options="projectData.projectJobCardVOList"
          :field-names="{ label: 'name', value: 'projectJobId' }"
          placeholder="请选择职位"
          @focus="focus"
          @change="handleChange"
        ></a-select>
      </div>
    </a-modal>

    <a-modal
      v-model:open="isJoinGroupOpen"
      title="加入小组"
      @ok="joinGroup"
      okText="加入"
      @cancel="
        () => {
          myGroupID = ''
          myJob = undefined
        }
      "
    >
      小组ID：<a-input
        v-model:value="myGroupID"
        placeholder="请输入小组ID"
        style="width: 100%; margin-top: 5px"
      />
      <div style="margin: 20px 0">
        请选择你在小组的职位：<a-select
          ref="select"
          style="width: 100%; margin-top: 5px"
          v-model:value="myJob"
          :options="projectData.projectJobCardVOList"
          :field-names="{ label: 'name', value: 'projectJobId' }"
          placeholder="请选择职位"
          @focus="focus"
          @change="handleChange"
        ></a-select>
      </div>
    </a-modal>
		<a-image-preview-group
      v-if="visible"
      :preview="{ visible, onVisibleChange: () => (visible = false), current }"
    >
      <a-image
        v-for="item in projectData.projectResultFileList"
        :width="200"
        :style="{ display: 'none' }"
        :src="item.fileUrl"
      />
    </a-image-preview-group>
  </div>
</template>

<script setup>
import { isTeacher } from '@/stores/info'

import { ref, reactive, onMounted, watch } from 'vue'
import AIConsulting from '@/components/AIConsulting.vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { h } from 'vue'
import { useRoute } from 'vue-router'
import { getProjectMessage, joinProject } from '@/request/projectSquare.js'
import {
  studentCreateGroup,
  studentJoinGroup,
} from '@/request/process/studentMember.js'
import MarkdownIt from 'markdown-it'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
const visible = ref(false)
const current = ref(0)
const route = useRoute()
const md = new MarkdownIt()

//markdown渲染
function markdownIt() {
  console.log('markdown渲染')
  const md = new MarkdownIt()
  console.log(projectData)
  console.log(projectData.name)
  if (projectData.describe && projectData.describe.includes('###')) {
    projectData.describe = md.render(projectData.describe)
  }
  if (projectData.scoreStandard && projectData.scoreStandard.includes('###')) {
    projectData.scoreStandard = md.render(projectData.scoreStandard)
  }
  if (projectData.target && projectData.target.includes('###')) {
    projectData.target = md.render(projectData.target)
  }
}

onMounted(async () => {
  const id = route.query.id
  let res = await getProjectMessage(id)
  for (let key in res.data) {
    if (typeof res.data[key] == 'string') {
      projectData[key] = `${res.data[key]}`.trim() || '暂无'
    } else {
      projectData[key] = res.data[key]
    }
  }
	projectData['newProjectResultFileList'] = res?.data?.projectResultFileList?.reduce((acc, curr, index) => {
		if (index % 2 === 0) {
			// 每两个元素创建一个新数组
			acc.push([curr, res?.data?.projectResultFileList[index + 1]]);
		}
		return acc;
	}, [])
  console.log(res)
  markdownIt()
})
let projectData = reactive({})
let activeJobIndex = ref(-1)
let activeJobItem = reactive({})

let isCheckedJob = ref()
watch(
  () => route.query.isCheckedJob,
  (newVal) => {
    isCheckedJob.value = newVal
    console.log('isCheckedJob', isCheckedJob.value)
  },
  {
    immediate: true,
  }
)

function jobClick(item, i) {
  if (!isCheckedJob.value) {
    activeJobIndex.value = -1
    activeJobItem = {}
    return
  }

  if (item.isFull == 1) {
    activeJobIndex.value = -1
    activeJobItem = {}
    return
  }
  activeJobIndex.value = i
  activeJobItem = item
  console.log('activeJobItem', activeJobItem)
}

function toApply() {
  if (activeJobIndex.value == -1) {
    message.error('请选择岗位后再应聘')
    return
  }
  Modal.confirm({
    title: '确认加入',
    icon: createVNode(ExclamationCircleOutlined),
    content: h('div', {}, [
      h(
        'div',
        {
          style: 'margin-bottom:6px',
        },
        `您确认加入${projectData.name}项目-${activeJobItem.name}岗位?`
      ),
    ]),
    style: {
      width: '430px',
    },
    async onOk() {
      try {
        let res = await studentJoinGroup({
          projectJobId: activeJobItem.projectJobId,
        })
        console.log('加入项目', res)
        if (res) {
          message.success('加入成功')
        } else {
          message.error('加入失败')
        }
        activeJobIndex.value = -1
        activeJobItem = {}
      } catch {
        message.error('加入失败')
      }
    },
    onCancel() {
      activeJobIndex.value = -1
      activeJobItem = {}
    },
  })
}

//创建小组
let isCreateGroupOpen = ref(false)
let isJoinGroupOpen = ref(false)
let myJob = ref(undefined)
let groupName = ref(undefined)
let jobOptions = reactive([
  {
    label: '前端',
    value: '前端',
  },
  {
    label: '后端',
    value: '后端',
  },
  {
    label: '测试',
    value: '测试',
  },
  {
    label: '产品经理',
    value: '产品经理',
  },
])

function toCreateGroup() {
  isCreateGroupOpen.value = true
}

function toJoinGroup() {
  isJoinGroupOpen.value = true
}

async function createGroup() {
  console.log('createGroup', {
    name: groupName.value,
    projectJobId: myJob.value,
  })

  let res = await studentCreateGroup({
    name: groupName.value,
    projectJobId: myJob.value,
  })
  console.log('创建', res)
  isCreateGroupOpen.value = false
  myJob.value = undefined
  groupName.value = undefined
  if (!res || res.code != 200) {
    message.error('创建失败')
    return
  }
  Modal.success({
    title: '创建成功',
    content: h('div', {}, [
      h(
        'p',
        {
          style: {
            'margin-bottom': '10px',
            'font-weight': 'bold',
            color: 'red',
            'font-size': '28px',
            display: 'flex',
            'algin-items': 'center',
            'justify-content': 'center',
          },
        },
        `${res.data}`
      ),
      h('p', '请截图保存小组ID，不要外泄'),
      h('p', '您的同伴点击加入小组，输入小组ID即可加入该组'),
    ]),
  })
}

let myGroupID = ref(undefined)

async function joinGroup() {
  if (!myJob.value) {
    message.error('请选择岗位')
    return
  }
  if (!myGroupID.value) {
    message.error('请填写小组ID')
    return
  }
  let res = await studentJoinGroup({
    teamId: myGroupID.value,
    projectJobId: myJob.value,
  })
  console.log('createGroup', myJob.value, myGroupID.value)
  console.log('创建', res)
  isJoinGroupOpen.value = false
  myGroupID.value = undefined
  myJob.value = undefined

  if (res.code != 200) return
  Modal.success({
    title: '加入成功',
  })
}

//项目日期处理
function formatDate(dateString) {
  // 将输入的字符串转换为 Date 对象
  const date = new Date(dateString)

  // 获取年份、月份和日期
  const year = date.getFullYear()
  const month = date.getMonth() + 1 // 月份从0开始，需要加1
  const day = date.getDate()
  // console.log('date',date)
  // 返回格式化后的字符串
  return `${year}年${month}月${day}日`
}

let signUpStatusLabel = ['未开始', '招募中', '已截止']
let projectData1 = reactive({
  name: '制造智能机器人',
  introdution:
    '本项目旨在开发一款智能机器人，专门为老年人提供日常生活照护和陪伴。随着全球老龄化问题的加剧，老年人面临着健康、孤独和生活自理能力下降等挑战。我们的智能机器人将结合先进的人工智能技术、传感器和人机交互界面，提供个性化的照护服务，帮助老年人提高生活质量，增强安全感。',
  goal: 'The goal of this project is to develop an intelligent robot that provides comprehensive care and companionship for the elderly. This robot will assist with daily activities, monitor health conditions, and ensure safety through features like medication reminders and emergency alerts. By fostering social interaction and enhancing the quality of life, the robot aims to empower seniors to live independently while offering peace of mind to their families.',
  signUpStatus: 1, //未开始,招募中,进行中,
  duration: '2024年8月4日至2024年12月30日',

  jobData: [
    {
      jobName: '前端',
      number: 2,
      recruitsNumber: 2, //已招聘人数
      skills: 'vue,web,react',
    },
    {
      jobName: '后端',
      number: 2,
      recruitsNumber: 1,
      skills: 'java',
    },
    {
      jobName: '项目经理',
      number: 1,
      recruitsNumber: 0,
      skills: '需求分析,产品设计',
    },
    {
      jobName: '后端',
      number: 2,
      recruitsNumber: 2,
      skills: 'java',
    },
    {
      jobName: '项目经理',
      number: 1,
      recruitsNumber: 0,
      skills: '需求分析,产品设计',
    },
  ],
})
</script>

<style lang="scss" scoped>
@import '@/styles/public.scss';
$aiContainerWidth: 30%;
$aiContainerHeight: 100%;
$aiContainerMarginRight: 15px;
$aiContainerFontSize: 12px;
$projectNameHeight: 50px;
$messageContainerPaddingTop: 15px;
$messageContainerPaddingRight: 20px;
* {
  box-sizing: border-box;
}
.project_interview_container {
  width: $viewMinWidth;
  /* height: 100%; */
  margin: 20px 0;
  /* padding: 20px; */
  /* padding-right: 30px; */
  display: flex;

  .ai_container {
    min-width: $aiContainerWidth;
    height: $aiContainerHeight;
    margin-right: $aiContainerMarginRight;
    /* padding:30px 0; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    font-size: $aiContainerMarginRight;
    /* margin: auto 0; */

    /* cursor: not-allowed; //不能点击的效果 */
    /* color: #cfd0d3; //置灰的颜色 */
    /* margin:calc((100% - #{ $aiContainerHeight})/2) 0; */
  }

  .project_container {
    width: calc(100% - #{$aiContainerWidth} - #{$aiContainerMarginRight});
    height: 100%;
    background-color: $theme1BgColor2;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    .project_container_projectName {
      width: 100%;
      min-height: $projectNameHeight;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      border-radius: 10px 10px 0 0;
      font-weight: bold;
      font-size: 18px;
      padding: 10px;
    }

    .project_container_message {
      flex: 1;
      min-height: 0;
      width: 100%;
      /* height:calc(100% - #{$projectNameHeight}); */
      padding: $messageContainerPaddingTop $messageContainerPaddingRight;
      overflow: auto;
      @include hoverShowScrollBar();

      .message_basic_information {
        max-width: 100%;
        align-self: center;
        display: -ms-grid;
        display: grid;
        /* 启用 Grid 布局 */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        /* 自动填充列，最小宽度200px */
        gap: 0px 15px;
        /* 设置子元素之间的间距 */
        align-items: start;
        /* 垂直对齐 */
      }

      .message_Box {
        margin-bottom: 20px;

        .message_label {
          margin-bottom: 10px;
        }

        .message_content {
          width: 100%;
          background-color: white;
          padding: 12px;
          line-height: 22px;
          border-radius: 5px;
          letter-spacing: 0.5px;
        }

        .statusContent {
          @include FlexCenterAndCenter();
        }

        $jobBoxWidth: 220px;

        .job_content {
          background-color: transparent;
          display: grid;
          /* 启用 Grid 布局 */
          grid-template-columns: repeat(auto-fill, minmax($jobBoxWidth, 1fr));
          /* 自动填充列，最小宽度200px */
          gap: 20px;
          /* 设置子元素之间的间距 */
          align-items: start;
          /* 垂直对齐 */

          .active {
            border: 2px solid $theme1BgColorDeep;
          }

          .disabled {
            cursor: not-allowed; //不能点击的效果
            color: #cfd0d3; //置灰的颜色
          }

          .jobBox {
            min-width: $jobBoxWidth;
            height: 120px;
            padding: 10px 15px;
            border-radius: 10px;
            background-color: white;
            display: flex;
            /* align-items: center; */
            justify-content: center;
            flex-direction: column;

            .jobBox_img_and_skills {
              display: flex;
              align-items: center;
              /* justify-content: space-between; */

              $jobImgBox: 50px;
              $jobImgBoxMarginRight: 10px;

              .jobImgBox {
                width: $jobImgBox;
                height: $jobImgBox;
                border-radius: 50%;
                margin-right: $jobImgBoxMarginRight;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .jobBox_skills {
                width: calc(100% - #{$jobImgBox} - #{$jobImgBoxMarginRight});

                .jobBox_skills_content {
                  width: 100%;
                  display: inline-block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }

            .jobBox_jobNum {
              display: flex;
              align-items: center;
              /* justify-content: space-between; */
              flex-wrap: wrap;
              margin-top: 5px;
              margin-left: 5px;

              .jobName {
                font-weight: bold;
              }

              .notfilled {
                color: deeppink;
                font-weight: bold;
              }

              & > div {
                margin-right: 10px;
              }

              & > div:nth-last-child(1) {
                margin-right: 0px;
              }
            }
          }
        }

        .jobLabel {
          display: flex;
          align-items: center;
          justify-content: space-between;

          :deep(.ant-btn) {
            height: 30px;
            font-size: 13px;
          }

          & > div {
            @include FlexCenterAndCenter();

            .jobLabelTip {
              font-size: 12px;
              color: grey;
            }
          }
        }
      }
    }
  }

	.imagesBox{
		width: 100%;
		height: 200px;
		display: flex !important;
		justify-content: space-around;
		align-items: center;
		.img {
			width: 50%;
			/* border: 1px solid #d7d2e2; */
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				max-height: 100%;
				max-width: 100%;
				cursor: pointer;
			}
		}
	}
	:deep(.slick-slide) {
		text-align: center;
		height: 160px;
		line-height: 160px;
		background: #ecf3fe;
		overflow: hidden;
	}
  :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  transition: ease all 0.3s;
  z-index: 1;
}
	:deep(.slick-arrow.custom-slick-arrow:before) {
		display: none;
	}
	:deep(.slick-arrow.custom-slick-arrow:hover) {
		color: #fff;
		opacity: 0.5;
	}
	:deep(.slick-slide h3) {
		color: #fff;
	}
}
</style>
